<template>
  <div class="channel-container">
    <ul class="if-ul channel" v-if="list.length">
      <li class="channel-item" v-for="(item, index) in list" :key="index">
        <div @click="jumpUrl(item.href, item.name, item.sort)">
          <div class="img-container">
            <img class="icon-img" :src="item.icon" />
          </div>
          <p class="tx-c icon-p mt5 dot">{{ item.name }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    list: {
      default: null
    }
  },
  components: {},
  data() {
    return {};
  },
  created() { },
  watch: {},
  computed: {},
  methods: {
    ...mapActions(["openRouteByWebview"]),
    jumpUrl(href) {
      if (!href) {
        return
      }
      if (href.indexOf(this.$env.backUrlBase) > -1) {
        href = href.split('#')[1];
      }
      this.openRouteByWebview({
        route: this.encodeChineseInUrl(href),
        jumpType: 'push',
        sendLocation: true
      })
      return;
    },
    encodeChineseInUrl(url) {
      return url.replace(/([?&]pageName=)([^&]+)/g, function (match, p1, p2) {
        // p1是"pageName="，p2是参数值
        return p1 + encodeURIComponent(p2);
      });
    },
  },
  mounted() { }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.channel-container {
  width: calc(100% - 4px);
  height: 170px;
  margin: 0 auto;

  .channel {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

    .channel-item {
      flex: 0 0 20%;
      overflow: hidden;
      padding-top: 13px;

      .img-container {
        width: 45px;
        height: 45px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 50%;

        .icon-img {
          width: 40px;
          height: 42px;
        }
      }

      .icon-p {
        font-family: MILanPro--GB1, MILanPro--GB1;
        font-weight: normal;
        font-size: 12px;
        color: #333333;
        line-height: 16px;
        font-style: normal;
      }
    }
  }
}
</style>
